<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a 歌曲列表页面</title>
</head>

<body>
    <div class="box">
        <div class="item">坚持到底.mp3</div>
        <div class="item">撕夜.mp3</div>
        <div class="item">天天看到你.mp3</div>
    </div>

    <style>
        .box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .item {
            cursor: pointer;
            margin: 10px;
            font-weight: 600;
        }
    </style>
    <script>
        let items = document.querySelectorAll('.item')

        // 创建一个频道 可以用来发送消息 实现两个页面之间的相互通讯
        let channel = new BroadcastChannel('music');

        for (let i = 0; i < items.length; i++) {
            const item = items[i];
            item.addEventListener('click', (e) => {
                console.log('e', e)
                console.log('e.target.innerText', e.target.innerText);
                let name = e.target.innerText;
                let n = +localStorage.getItem('music')
                
                // 判断是否打开新的标签
                if (!isNaN(n) && n > 0) {
                    console.log('不打开新页面');
                    channel.postMessage(name);
                } else {
                    console.log('打开新页面');
                    window.open('./b player.html?name=' + name);
                }
            })
        }

    </script>
</body>

</html>